/* 先清除标签默认样式 */
* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none; /* 清除a标签,默认的下划线 */
  color:#721c24; /* 文字颜色 */
}

/* 标题的设置 */
h1 {
  text-align: center; /* 文本对齐方式: 视频居中 */
  color:#333; /* 文字颜色 */
  margin: 20px 0; /* 外边距 */
}

.数据条目{
  width: 1050px; /* 设置宽, 高随内容撑开 */
  margin: 5px 0; /* 版心居中 */
  font-size: 20px; /* 文字大小 */
  text-align: right; /* 文本对齐方式: 右对齐 */
}


/* 录入学员信息区域 设置 */
.录入学员信息 {
  width: 900px; /* 设置宽, 高随内容撑开 */
  margin: 50px auto; /* 版心居中 */
  text-align: center; /* 文本对齐方式: 水平居中 */
}

/* 文本框 和 选单 */
.录入学员信息  input,
.录入学员信息 select {
  width: 80px; /* 宽高 */
  height: 27px;
  outline: none; /* 清除文本框的边框线 */

  border-radius: 5px; /* 边框线,圆角属性 */
  border:1px solid #b8daff; /* 边框线 */

  padding-left: 5px; /* 左内边距 */
  box-sizing: border-box; /*盒子尺寸: 內减模式,  防止 内外边距 设置可能撑大盒子*/
  margin-right: 15px; /* 右外边距 */
}

/* 录入按钮 */
.录入学员信息 button {
  width: 60px; /* 宽高 */
  height: 27px;
  background-color: #004085; /* 背景色 */

  /*outline: none; !* 清除文本框的边框线 *!*/
  /*border: 0;*/
  color: #fff; /* 文字颜色 */
  border-radius: 5px; /* 边框线,圆角属性 */
  cursor: pointer; /* 鼠标改变形状, 效果鼠标悬停到按钮上改变形状 */
}
.录入学员信息 .年龄 {
  width: 50px;
}



/* 显示记录的信息,表格区域 设置 */
/* 这个表格 设置 */
table {
  margin:0 auto; /* 版心居中 */
  width: 800px; /* 设置宽, 高随内容撑开 */
  border-collapse: collapse; /* 合并相邻边框线 */
  color:#004085; /* 文字颜色 */
}

/* 表头 表格设置 */
th {
  padding: 10px; /* 内边距 */
  background-color: #cfe5ff; /* 背景色 */
  
  font-size: 20px; /* 字号大小 */
  font-weight: 400; /* 字体粗细: 不加粗 */
}
td,th {
  border:1px solid #b8daff; /* 边框线 */
}


/* 表头下面,具体内容区域 设置, 这个区域在页面代码里没有写标签,通过JS渲染的方式实现*/
/* 表格设置 */
td {
  padding:10px; /* 内边距 */
  color:#666; /* 文字颜色 */
  text-align: center; /* 文本对齐: 水平居中 */
  font-size: 16px; /* 文字大小 */
}

/* 表行设置 */
tbody tr {
  background: #fff; /* 背景色 */
}
tbody tr:hover {
  background: #e1ecf8; /* 鼠标悬停, 改变背景色 */
}

